<div id="header">
    <div class="page-container" id="nav">
        <div id="logo" class="logo">
            <a href="/" target="_self" class="hide-text" title="莞工飞鸟">
                莞工飞鸟
            </a>
        </div>
        <button type="button" class="navbar-toggle visible-xs-block js-show-menu">
            <i class="icon-menu">
            </i>
        </button>
        <ul class="nav-item">
            <li>
                <a href="/" target="_self">
                    首页
                </a>
            </li>
            <li>
                <a href="/course/list" class="program-nav " target="_self">
                    课程
                    <i class="icn-new">
                    </i>
                </a>
            </li>
        </ul>
        <div id="login-area">
            <ul class="header-unlogin clearfix">
                {if condition="$is_login eq 1"}
                <li class="set_btn user-card-box" id="header-user-card" style="margin-top: 20px;">
                    <a id="header-avator" class="user-card-item js-header-avator" action-type="my_menu"
                       href="javascript:void(0);" target="_self">
                        <img width="40" height="40" src="http://img.mukewang.com/545862440001cef302200220-100-100.jpg">
                        <i class="myspace_remind" style="display: none;">
                        </i>
                    <span style="display: none;">
                        动态提醒
                    </span>
                    </a>
                    <div class="g-user-card">
                        <div class="card-inner">
                            <div class="card-top clearfix">
                                <a href="javascript:void(0);" class="l">
                                    <img src="http://img.mukewang.com/545862440001cef302200220-100-100.jpg"
                                         alt="{$user.username}">
                                </a>
                                <div class="card-top-right-box l">
                                    <a href="javascript:void(0);">
                                        <span class="name text-ellipsis">
                                            {$user.username}
                                        </span>
                                    </a>
                                    <div class="meta">
                                        <a href="javascript:void(0);">
                                            经验
                                            <b id="js-user-mp">
                                                102
                                            </b>
                                        </a>
                                        <a href="javascript:void(0);">
                                            积分
                                            <b id="js-user-credit">
                                                1
                                            </b>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="user-center-box">
                                <ul class="clearfix">
                                    <li class="l">
                                        <a href="/user/courses" target="_blank">
							<span class="user-center-icon icon-tick">
							</span>
                                            我的课程
                                        </a>
                                    </li>
                                    <li class="l">
                                        <a href="http://order.imooc.com/myorder" target="_blank">
							<span class="user-center-icon icon-receipt">
							</span>
                                            订单中心
                                        </a>
                                        <i id="js-usercard-coupon-icon" style="display: none;">
                                        </i>
                                    </li>
                                    <li class="l">
                                        <a href="/mall/index" target="_blank">
							<span class="user-center-icon icon-score_shop">
							</span>
                                            积分商城
                                        </a>
                                    </li>
                                    <li class="l">
                                        <a href="/user/setbindsns" target="_blank">
							<span class="user-center-icon icon-set">
							</span>
                                            个人设置
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="card-history">
                            <span class="history-item">
                                <span class="tit text-ellipsis">
                                    {$his_video.sv_name}
                                </span>
                                <span class="media-name text-ellipsis">
                                    {$his_chapter.svl_chapter_no} {$his_chapter.svl_name}
                                </span>
                                <i class="icon-clock">
                                </i>
                                <a href="/course/video?v={$his_chapter.svl_id}" class="continue" title="{$his_chapter.svl_chapter_no} {$his_chapter.svl_name}">
                                    继续
                                </a>
                            </span>
                            </div>
                            <div class="card-sets clearfix">
                                <a href="/login/logout" class="r">
                                    安全退出
                                </a>
                            </div>
                        </div>
                    </div>
                </li>
                {else /}
                <li class="header-signin">
                    <a href="#" id="js-signin-btn">
                        登录
                    </a>
                </li>
                <li class="header-signup">
                    <a href="#" id="js-signup-btn">
                        注册
                    </a>
                </li>
                {/if}
            </ul>
        </div>
        <div class='search-warp clearfix' style='min-width: 32px; height: 60px;'>
            <div class="search-area" data-search="top-banner">
                <input class="search-input" value="{$keyword}" data-suggest-trigger="suggest-trigger" type="text" autocomplete="off">
            </div>
            <div class='showhide-search' data-show='no'>
                <i class='icon-search'>
                </i>
            </div>
        </div>
    </div>
</div>
<div class="bindHintBox js-bindHintBox hide">
    <div class="pr">
        为了账号安全，请及时绑定邮箱和手机
        <a href="/user/setbindsns" class="ml20 color-red" target="_blank">
            立即绑定
        </a>
        <button class="closeBindHint js-closeBindHint" type="button">
        </button>
        <div class="arrow">
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {

        $('.showhide-search').click(function(){
            var _keyword = $('.search-input').val();
            if (_keyword == '') {
                return false;
            }
            window.location.href = '/course/list?keyword='+_keyword;
        });
        $('.search-input').keydown(function(e){
            if (e.keyCode == 13) {
                var _keyword = $(this).val();
                if (_keyword == '') {
                    return false;
                }
                window.location.href = '/course/list?keyword='+_keyword;
            }
        });
        $('#header-user-card').mouseenter(function(){
            $(this).addClass('hover');
        }).mouseleave(function(){
            $(this).removeClass('hover');
        });
    });
</script>